import React, { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import * as async from '../store/Slice'

const Home = React.lazy(() => import('../pages/Home'))
const Diandan = React.lazy(() => import('../pages/Diandan'))
const Store = React.lazy(() => import('../pages/Store'))
const Order = React.lazy(() => import('../pages/Order'))
const My = React.lazy(() => import('../pages/My'))

/* 导入底部导航栏 */
import Tabbars from '../conponents/Tabbar'

export default function AppRouter() {

    //获取数据 在初始周期和更新周期中执行
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch(async.async_gettypelist())
        dispatch(async.async_getshoplist())
        dispatch(async.async_getcarlist())
    }, [])
    //获取数据
    let obj = useSelector(state => state.crms1)
    //console.log(obj);

    return (
        <div>
            {/* 配置一级路由 */}
            <BrowserRouter>
                {/* 底部导航栏 */}
                <Tabbars></Tabbars>
                <Routes>
                    <Route path='/home' element={<Home />} />
                    <Route path='/diandan' element={<Diandan />} />
                    <Route path='/store' element={<Store />} />
                    <Route path='/order' element={<Order />} />
                    <Route path='/my' element={<My />} />
                    {/* 路由重定向 */}
                    <Route path='/' element={<Navigate to='/home' />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
